<template>
  <Dialog
    width="810px"
    :title=title
    :visible.sync="innerVisible">
    <div v-show="!showNotice">
      <div style="margin: 30px 20px 0px 0px">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <!--<el-col :span="12">-->
              <!--<el-form-item label="费用总额:">-->
                <!--<span style="color: red">{{totalActualMoney}}</span>元-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <!--<el-col :span="12" v-if="Number(item.couponsDiscount) > 0">-->
              <!--<el-form-item label="优惠券抵扣金额:">-->
                <!--<span style="color: red">{{item.couponsDiscount}}</span>元-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <el-col :span="24">
              <el-form-item label="实付金额:">
                <span style="color: red">{{actualMoney}}</span>元
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退款金额" prop="refundAmount" :rules="refundAmount">
                <el-input v-model="form.refundAmount" :placeholder="'可退款金额'+ this.actualMoney">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <span style="line-height: 37px;margin-left: 10px">如果退光实付金额，对师傅将发起全额退款。</span>
              <el-button type="text" class="ladda-button pull-right" data-style="zoom-out" @click="refundNotice">{{showNotice == true ? '返回退款' : '退款须知'}}</el-button>
            </el-col>
            <!--<el-col :span="24">-->
              <!--<el-form-item>-->
                <!--<span style="color: red">如果退光实付金额，对师傅将发起全额退款。</span>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="退款说明" prop="refundMemo">
                <el-input type="textarea" v-model="form.refundMemo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="上传图片" prop="refundPic">
                <upload-image v-model="form.refundPic" :formData="{group: orderId}" :max="5"></upload-image>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="成功退款后" prop="refundOrderState">
                <el-radio-group v-model="form.refundOrderState">
                  <el-tooltip class="item" :disabled="refundIsOrNot != 1" effect="dark" content="SCM终止服务只能选择“订单关闭”" placement="top-start">
                    <el-radio :disabled="refundIsOrNot == 1" :label="1">订单不关闭</el-radio>
                  </el-tooltip>

                  <el-radio :label="2">订单关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div v-show="!showNotice" slot="footer">
      <el-button @click="innerVisible = false">关闭窗口</el-button>
      <el-button type="primary" :loading="loading" @click="submit"> 提   交 </el-button>
    </div>
    <div v-show="showNotice" style="align: center; margin-left: 30px">
      <el-button type="text" @click="refundNotice">{{showNotice ? '返回退款':'退款须知'}}</el-button>
      <p>
      订单在确认评价前可以发起退款。
      </p>
      <p>
      发起退款后，您可以在<span style="font-size: 16px;" class="font-red">售后服务-退款中</span>查看退款进度。
      </p>
      <p>
      退款成功后退款金额进入您的钱包可直接提现或支付。
      </p>
      <p>
      如服务方拒绝退款，平台客服将介入仲裁，仲裁结果将在客服介入后3个工作日内公布并执行。</p>
      <p>
        如果该订单有代收款，退款选择关闭订单，退款成功后，代收款将不会被执行。
      </p>
      <p>
        如果该订单存在使用优惠的情况，当订单实付金额全额退款后，优惠券将失效并且不再返还。
      </p>
    </div>
  </Dialog>
</template>
<script>
import {unixTimestampFilter, decimalNumFilter} from '@/filters'
import {isFormatNumber, range} from '@/utils/validate'
import {copy, dotData} from '@/utils'
export default {
  name: 'modalRefund',
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      required: true
    },
    refundIsOrNot: {
      type: [Number, String],
      required: true
    },
    item: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  filters: {
    unixTimestampFilter,
    decimalNumFilter
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      const form = this.$refs.form
      if (form) {
        form.resetFields()
      }
      this.initRefundOrderState(this.refundIsOrNot)
      this.getActualMoney()
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      routeName: this.$route.name,
      routeNextPath: '',
      showNotice: false,
      title: '发起退款',
      form: {
        refundAmount: '',
        refundMemo: '',
        refundPic: [],
        refundOrderState: 1
      },
      actualMoney: 0,
      rules: {
      }
    }
  },
  created() {
    if (this.routeName === 'myOrdersInServiceIndex') {
      this.routeNextPath = '/ss-fhb/myOrders/inService/index'
    } else {
      this.routeNextPath = '/ss-fhb/myOrders/confirming/index'
    }
  },
  computed: {
    refundAmount() {
      let rules = []
      rules = [
        { required: true, message: '请输入退款金额', trigger: 'blur' },
        { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' },
        { validator: range, max: this.actualMoney, message: '输入金额不能超过实付金额', trigger: 'blur' }
      ]
      return rules
    }
  },
  methods: {
    getActualMoney() {
      this.$ajax.get('/ms-fahuobao-order/cost/query-cost-merchant-sum', {orderId: this.orderId}).then(response => {
        this.actualMoney = response.data
      })
    },
    refundNotice() {
      this.showNotice = !this.showNotice
      if (this.showNotice) {
        this.title = '退款须知'
      } else {
        this.title = '发起退款'
      }
    },
    // 退款申请
    submit($event) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          let data = copy(this.form, true)
          data.orderId = this.orderId
          if (Array.isArray(data.refundPic)) {
            data.refundPic = data.refundPic.join(',')
          }
          this.loading = true
          this.$ajax.post('/ms-fahuobao-order/merRefund/saveOrderRefundRecord', data).then(response => {
            const success = dotData(response, 'success')
            if (success) {
              this.$confirm('退款申请成功', '提示', {
                type: 'success',
                center: true,
                confirmButtonText: '确定',
                showCancelButton: false,
                closeOnClickModal: false
              }).then(_ => {
                this.$router.push({path: '/redirect' + this.routeNextPath})
              })
            }
            this.loading = false
          }).catch(_ => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    initRefundOrderState(val) {
      if (val === 1) {
        this.form.refundOrderState = 2
      } else {
        this.form.refundOrderState = 1
      }
    }
  }
}
</script>
